<template>
  <div class="edit-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="790px" destroy-on-close>
      <el-tabs type="border-card">
        <el-tab-pane label="活动配置">
          <el-row :gutter="35" style="margin-top: 20px;">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="name" label="活动名称">
                <el-input v-model="state.content.name" placeholder="请输入名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="code" label="活动状态">
                <el-switch v-model="state.content.status" class="mb-2" :active-value="1" :inactive-value="2"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="startDate" label="活动开始日期">
                <el-date-picker v-model="state.content.startDate" type="date" :value-format="'YYYY-MM-DD'"
                  placeholder="请选择活动开始日期" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="endDate" label="活动结束日期">
                <el-date-picker v-model="state.content.endDate" type="date" :value-format="'YYYY-MM-DD'"
                  placeholder="请选择活动开始日期" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="everyStartTime" label="抽奖开始时间">
                <el-time-picker v-model="state.content.everyStartTime" :value-format="'HH:mm:ss'" type="date"
                  placeholder="请选择抽奖开始时间" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="everyEndTime" label="抽奖结束时间">
                <el-time-picker v-model="state.content.everyEndTime" :value-format="'HH:mm:ss'" type="date"
                  placeholder="请选择抽奖结束时间" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35" style="margin-bottom: 18px;">
            <el-form-item prop="weeks" label="抽奖周期" style="padding-left: 17.5px;">
              <!-- <el-checkbox-group v-model="state.content.weeks">
                <el-checkbox :label="1">周一</el-checkbox>
                <el-checkbox :label="2">周二</el-checkbox>
                <el-checkbox :label="3">周三</el-checkbox>
                <el-checkbox :label="4">周四</el-checkbox>
                <el-checkbox :label="5">周五</el-checkbox>
                <el-checkbox :label="6">周六</el-checkbox>
                <el-checkbox :label="7">周日</el-checkbox>
              </el-checkbox-group> -->
            </el-form-item>
            <el-slider style="width: calc(100% - 200px);padding-left: 10px;" :marks="weekMap" v-model="state.content.weeks" range show-stops :max="7" :min="1" />
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="startDate" label="单人单日抽奖次数">
                <el-input-number v-model="state.content.everyNum" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="text1" label="文本一">
                <el-input v-model="state.content.text1" placeholder="宠粉时间到" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="text2" label="文本三">
                <el-input v-model="state.content.text2" placeholder="本次活动仅限校园卡用户凭手气抽随机礼品" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="text3" label="文本二">
                <el-input v-model="state.content.text3" placeholder="即可开奖无需等待" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="奖品配置">
          <el-button plain style="margin-bottom: 15px;" @click="handleAdd"
            :disabled="state.dialog.type === 1">添加奖品</el-button>
          <el-row v-for="(item, index) in state.prizesList" :key="index" :gutter="35" style="margin-bottom: 15px;"
            class="prize_item">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="prizeName" label="奖品名称">
                <el-input v-model="state.prizesList[index].name" placeholder="请输入奖品名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item prop="prizeNumber" label="中奖概率">
                <el-input v-model="state.prizesList[index].probability" placeholder="请输入中奖概率，注意中奖概率应小于1"
                  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item prop="prizeProbability" label="奖品描述">
                <el-input v-model="state.prizesList[index].remark" autosize type="textarea" placeholder="请输入奖品描述" />
              </el-form-item>
            </el-col>

            <div style="display: flex;justify-content: end;width: calc(100% - 19px);"> <el-button type="danger"
                size="small" plain @click="handleDelete(index)" :disabled="state.dialog.type === 1">删除</el-button>
            </div>
          </el-row>

        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onSubmit" type="primary" size="default">确认</el-button>
          <el-button @click="onCancel" size="default">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import {
  Delete,
} from '@element-plus/icons-vue'
import { addAcitvity, editAcitvity } from '@/api/prize';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();

const weekMap = {
  1: "周一",
  2: "周二",
  3: "周三",
  4: "周四",
  5: "周五",
  6: "周六",
  7: "周日",
} as any;

type PrizeItem = {
  name: string;
  probability: string;
  remark: string;
}
const useContent = () => {
  return {
    name: '',
    startDate: '',
    endDate: '',
    everyStartTime: '',
    everyEndTime: '',
    everyNum: 1,
    status: 1,
    text1: '',
    text2: '',
    text3: '',
    weeks: [1, 7]
  }
}

const state = reactive({
  content: useContent(),
  dialog: {
    isShowDialog: false,
    type: 0,
    title: '',
  },
  prizesList: [] as PrizeItem[],
});

const handleDelete = (id: any) => {
  state.prizesList = state.prizesList.filter((item, index) => {
    if (index !== id)
      return item
  })
}

const handleAdd = () => {
  state.prizesList.push({ name: '', probability: '', remark: '' })
}

// 打开弹窗
const openDialog = (type: string, row?: any) => {
  state.dialog.isShowDialog = true
  if (type === 'edit') {
    state.dialog.title = '编辑'
    state.dialog.type = 1
    state.content = JSON.parse(JSON.stringify(row))
    state.prizesList = JSON.parse(JSON.stringify(row.prizes))
  } else {
    state.dialog.title = '新增'
    state.dialog.type = 0
    state.content = useContent()
  }
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  state.content = useContent()
  emit('refresh');
};
// 取消
const onCancel = () => {
  closeDialog();
};

// 提交
const onSubmit = () => {
  console.log(state.content);

  if (state.dialog.type === 1) {
    state.prizesList = state.prizesList.map((item: any) => {
      return {
        ...item,
        probability: parseFloat(item.probability)
      }
    })
    editAcitvity({ ...state.content, ...{ prizes: state.prizesList } }).then(({ content }: any) => {
      onCancel()
      emit('refresh');
    })

  } else {
    state.prizesList = state.prizesList.map((item: any) => {
      return {
        ...item,
        probability: parseFloat(item.probability)
      }
    })
    addAcitvity({ ...state.content, ...{ prizes: state.prizesList } }).then(({ content }: any) => {
      onCancel()
      emit('refresh');
    })
  }
};


defineExpose({
  openDialog,
});
</script>


<style scoped lang="scss">
// :deep(.el-dialog__header) {
//   margin: 0;
//   border-bottom: 1px dashed rgba(0, 0, 0, .2);
// }

// :deep(.el-dialog__footer) {
//   border-top: 1px dashed rgba(0, 0, 0, .2);
// }</style>